<script>
import {getToken} from "@/store/token";

export default {
  name: "myCart",
  data() {
    return {
      type: {
        page: 1,
        size: 3,
        total: 0
      },
      total: 0,
      count: 0,
      ids: "",
      cartData: [],
      userId: '',
      visible: false,
      multipleSelection: [],
      submitBook: []
    }
  }, methods: {
    handleClick(row) {
      this.$api.cart.deleteCartsById(row.id).then((res) => {
        if (res.data.content) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.visible = false
          this.getCarts()
        } else {
          this.$message.error('服务器端错误' + res);
        }
      }).catch((res) => {
        this.$message.error('请求失败' + res);
      })
      console.log(row);
    },
    handleCurrentChange(val) {
      this.getCarts()
    },
    cancel() {
      this.$refs.cartsTable.clearSelection();
    },
    toBuy() {
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(x => {
          var book = {}
          book.periodicalId = x.periodicalId;
          book.num = x.num
          book.year = x.year
          book.startTime = x.startTime
          book.name = x.periodical.name;
          book.total = x.num * x.year * x.periodical.price
          book.coverAddress = x.periodical.coverAddress
          book.price = x.price
          book.periods = x.periods
          this.submitBook.push(book)
        })
        this.$router.replace({
          name: 'pay',
          params: {
            order: JSON.stringify(this.submitBook)
          }
        });
      } else {
        this.$message.warning('至少选择一个商品');
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.count = 0;
      this.total = 0;
      val.forEach(x => {
        this.total = this.total + x.num * x.periodical.price * x.year;
        this.count++;
        if (this.ids !== "") {
          this.ids = this.ids.concat(',')
        }
        this.ids = this.ids.concat(x.periodical.id)
      })
    },
    getCarts() {
      this.$api.cart.getCartsByUser(
          this.type.page,
          this.type.size,
          this.userId
      ).then((res) => {
        this.cartData = res.data.content.records;
        this.type.total = res.data.content.total;
      }).catch((res) => {
        this.$message.error('请求失败' + res);
      })
    }
  },
  mounted() {
    this.userId = JSON.parse(getToken('user')).id
    this.getCarts()
  }
}
</script>

<template>
  <div>
    <div>
      <el-table
          ref="cartsTable"
          :data="cartData"
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="商品信息"
            width="400px"
        >
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: space-between">
              <el-image style="height: 120px" :src="scope.row.periodical.coverAddress"/>
              <p>{{ scope.row.periodical.name }}</p>
              <div style="display: flex;flex-direction: column">
                <span>价格：￥{{ scope.row.periodical.price }}</span>
                <span>购买数量：{{ scope.row.num }}</span>
                <span>购买年数：{{ scope.row.year }}</span>
                <span>期数：{{ scope.row.periodical.periods }}</span>
              </div>
            </div>
          </template>

        </el-table-column>
        <el-table-column
            label="购买数量"
            align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="总金额(元)"
        >
          <template slot-scope="scope">
            <div>
              ￥<span style="color: #ee9900">{{ scope.row.num * scope.row.periodical.price * scope.row.year }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除该期刊吗？"
                @confirm="handleClick(scope.row)"
            >
              <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div>

        <el-button size="mini" @click="cancel()">取消选择</el-button>
        <span style="float: right;">
          <span style="margin-right: 10px">已选商品<span
              style="color:#ff8400; font-size: 18px;font-weight: bolder">{{ count }}</span>件</span>

          合计：<span style="color:#ff8400;">￥{{ total }}</span>
          <el-button style="margin-left: 10px" type="warning" size="mini" @click="toBuy()">去结算</el-button>
        </span>
      </div>
    </div>
    <div style="width: 99%;display: flex">
      <div style="margin: 10px auto;">
        <el-pagination
            @size-change="handleCurrentChange"
            @current-change="handleCurrentChange"
            :current-page.sync="type.page"
            :page-size="type.size"
            layout="total, prev, pager, next"
            :total="type.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>